<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '支付失败',
    backgroundColor: '#f5f5f5',
  },
}
</route>

<template>
  <view class="pay-result error">
    <!-- 状态图标 -->
    <wd-icon name="warning" size="120rpx" color="#e4393c" />

    <!-- 支付结果 -->
    <view class="result-text">
      <text class="title">支付失败</text>
      <text class="reason">{{ failReason }}</text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <wd-button type="default" custom-style="flex:1;margin-right:20rpx" @click="navigateToHome">
        返回首页
      </wd-button>
      <wd-button type="primary" custom-style="flex:1" @click="retryPayment">重新支付</wd-button>
    </view>

    <!-- 客服提示 -->
    <view class="customer-service">
      <text>支付遇到问题？联系</text>
      <text class="link" @click="contactService">在线客服</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const orderId = ref('')
const failReason = ref('')
const paymentAmount = ref(0)

onLoad((options) => {
  // 模拟数据，实际应从接口获取
  orderId.value = options.orderId || '20230808123456'
  paymentAmount.value = Number(options.amount) || 2999.0
  failReason.value = options.reason || '支付超时，请重新尝试'
})

const navigateToHome = () => {
  uni.switchTab({ url: '/pages/index/index' })
}

const retryPayment = () => {
  uni.navigateTo({ url: `/pages/order/confirm?id=${orderId.value}` })
}

const contactService = () => {
  uni.navigateTo({ url: '/pages/service/online' })
}
</script>

<style lang="scss" scoped>
.pay-result.error {
  .result-text {
    .title {
      color: #e4393c;
    }
    .reason {
      display: block;
      margin-top: 20rpx;
      font-size: 32rpx;
      color: #666;
    }
  }

  .customer-service {
    margin-top: 60rpx;
    font-size: 28rpx;
    color: #666;
    text-align: center;
    .link {
      color: #1677ff;
      text-decoration: underline;
    }
  }
}
</style>
